<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li{
        list-style: none;
    }
    .list{
        height: 200px;
        width: 300px;
        overflow: auto;
    }
    .list ul li{
        height: 50px;
    }
</style>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
    <script type="text/javascript" src="../js/17.0.1/prop-types.js"></script>
    <script type="text/babel">
        class NewsList extends React.Component{
            state={
                newsList:[]
            }
            componentDidMount(){
                setInterval(()=>{
                    const {newsList}=this.state
                    console.log(newsList);
                    const news = '新闻'+(newsList.length+1)
                    console.log(news);
                    this.setState({newList:newsList.unshift(news)})
                },500)
            }
            getSnapshotBeforeUpdate(){
                return this.list.scrollHeight
            }
            render(){
                const {newsList}= this.state
                return (
                    <div className="list" ref={c=>this.list=c}>
                        <ul>
                            {newsList.map((v,i)=>{
                                return <li key={i}>{v}</li>
                            })}
                        </ul>
                    </div>
                )
            }
            componentDidUpdate(prePorps,preState,snapshotValue){
                this.list.scrollTop += this.list.scrollHeight-snapshotValue
            }
        }

        ReactDOM.render(<NewsList/>,document.getElementById('test'))
    </script>
</body>

</html>